import React from 'react'
import { NavBar, Icon ,Carousel, WingBlank,TabBar,WhiteSpace,Tabs, InputItem } from 'antd-mobile'
// import {bannerApi,rtApi,xdApi,xgApi} from '../api/Discover'
import '../style/discover.css'
import { observer,inject } from 'mobx-react'
import Public_TAB from './Public_TAB'
import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom'


const tabs = [
  { title: '新碟',path:'/xindie'},
  { title: '新歌',path:'/xinge' },

];
@inject('Find')
@observer

class Discover extends React.Component{
    constructor(){
        super()
        this.state={
           
            value:"",
            // rt:[],
            // xd:[],
            // xg:[],
            value1:"",
        }
        this.handleChange = this.handleChange.bind(this);
    }





   
    
    clear = () => {
      this.setState({ value: '' });
    };
    handleClick = () => {
      this.manualFocusInst.focus();

    }
    onClick(){
      console.log("点击事件")
    }













    componentDidMount() {
      //轮播图
      const { Find } = this.props
        // bannerApi().then(res=>{
        //     this.setState({
        //         data:res.banners
        //     })
        // })


        Find.get_banner()
        Find.set_banner()
        console.log()
        
        //日推
        // rtApi().then(res=>{
        //     this.setState({
        //         rt:res.result
        //     })
        // })

        Find.rtApi()
        Find.set_rt()




        //新碟
        // xdApi().then(res=>{
        //     this.setState({
        //       xd:res.albums
        //     })
        //   })

          Find.xdApi()
          Find.set_xd()




        //新歌

        Find.xgApi()
        Find.set_xg()

        
        // xgApi().then(res=>{
        //   console.log(res);
        //   this.setState({
        //     xg:res.recommend
        //   })
        // })
      }
      handleChange(event) {
        this.setState({value1:event.target.value});
        console.log(this.value1)
        this.props.history.push("/search")
        
      }
    render(){
      // console.log(this.props)
      const { banner,rt,xd,} =this.props.Find
      // const {  } =this.props.Find

      // console.log(banner)
     
        return(
            <div>
                {/* 头部导航区域 */}
                <NavBar className="nav_top"
      mode="dark"
      leftContent={[
 
        ]}
      
      rightContent={[
        <Icon key="0" type="left"  style={{ marginRight: '10px' ,color:"#000" }} />,
        // <SearchBarExample key="1"/>,
        // <Icon key="1" type="search"  />,

        <input type="text"  placeholder="点击搜索" className="discover_input" onFocus={this.handleChange}/>,




        
        <Icon key="2" style={{ marginLeft: '16px' ,background:'url('+require('../img/正在播放.png')+') center center /  23px 23px no-repeat' }}/>,
        
      ]}
    >
       
    </NavBar>
                <WhiteSpace />
                {/* banner轮播图区域 */}
                <WingBlank>
                    <Carousel
                    autoplay
                    infinite
                    beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
                    afterChange={index => console.log('slide to', index)}
                    >
                    {banner.map(item => (
                        <a
                        key={item.targetId}
                        href={item.url}
                        style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
                        >
                        <img
                            src={item.imageUrl}
                            alt=""
                            style={{ width: '100%', verticalAlign: 'top' }}
                            onLoad={() => {
                            // fire window resize event to change height
                            window.dispatchEvent(new Event('resize'));
                            this.setState({ imgHeight: 'auto' });
                            }}
                        />
                        </a>
                    ))}
                    </Carousel>
                </WingBlank>
                <WhiteSpace />
                {/* 中部频道 */}
                <TabBar
                    unselectedTintColor="#949494"
                    tintColor="#33A3F4"
                    barTintColor="white"
                    tabBarPosition="top"
                    >

                  <TabBar.Item
                  title="每日推荐"
                  key="rt"
                  icon={<div style={{
                    width: '22px',
                    height: '22px',
                    background: 'url('+require('../img/日历.png')+') center center /  23px 23px no-repeat' }}
                  />
                  }
                  onPress={(props) => {
                    this.setState({
                      // selectedTab: 'blueTab',
                      props:this.props.history.push("/")
                    });
                  }}>
                  </TabBar.Item>

                  <TabBar.Item
                  icon={
                    <div style={{
                      width: '22px',
                      height: '22px',
                      background: 'url('+require('../img/歌单.png')+') center center /  23px 23px no-repeat' }}
                    />
                  }
                  title="歌单"
                  key="gd"
                  onPress={() => {
                    this.setState({
                      // selectedTab: 'redTab',
                    });
                  }}
                  >
                  </TabBar.Item>

                  <TabBar.Item
                    icon={
                      <div style={{
                        width: '22px',
                        height: '22px',
                        background: 'url('+require('../img/排行榜.png')+') center center /  23px 23px no-repeat' }}
                      />
                    }
                    title="排行榜"
                    key="phb"
                    onPress={() => {
                      this.setState({
                        // selectedTab: 'greenTab',
                      });
                      // console.log(1212121212)
                      console.log(this.props)
                      this.props.history.push("/top")
                    }}
                  >
                  </TabBar.Item>

                  <TabBar.Item
                  icon={
                    <div style={{
                      width: '22px',
                      height: '22px',
                      background: 'url('+require('../img/电台直播.png')+') center center /  23px 23px no-repeat' }}
                    />
                  }
                  title="电台"
                  key="dt"
                  onPress={() => {
                    this.setState({
                      // selectedTab: 'greenTab',
                    });
                  }}
                >
                </TabBar.Item>
                <TabBar.Item
                icon={
                  <div style={{
                    width: '22px',
                    height: '22px',
                    background: 'url('+require('../img/直播.png')+') center center /  23px 23px no-repeat' }}
                  />
                }
                title="直播"
                key="zb"
                onPress={() => {
                  this.setState({
                    // selectedTab: 'greenTab',
                  });
                }}>
                </TabBar.Item>
              </TabBar>
              {/* 推荐歌单 */}
              <WhiteSpace />
              <hr style={{width:"90%"}}/>
              <div className="tjgd">推荐歌单</div>
              <div style={{display:"flex",flexWrap:"wrap",width:"90%",margin:"0 auto"}}>
                    {
                        rt.map(item=>(
                                <div key={item.id} style={{display:"flex",
                                                          flexDirection:"column",
                                                          width:"33%",
                                                          }}>
                                    <img src={item.picUrl}
                                    style={{width:"100%",borderRadius:"7px"}}
                                    />
                                    <p>{item.name}</p>
                                    {/* <span>{item.playcount}</span> */}
                                </div>
                            
                        ))
                    }
              </div>
              {/* 新碟，新歌 */}
              <WhiteSpace />
              <Tabs tabs={tabs}  initialPage={0} >
              <div style={{display:"flex",flexWrap:"wrap",width:"90%",margin:"0 auto"}}>
                    {
                        xd.map(item=>(
                                <div key={item.id} style={{display:"flex",
                                                          flexDirection:"column",
                                                          width:"33.3%",
                                                          borderRadius:"30px"}}>
                                    <img src={item.picUrl}
                                    style={{width:"100%",borderRadius:"5px",marginTop:"10px"}}
                                    />
                                    <p>{item.name}</p>
                                </div>
                            
                        ))
                    }
              </div>
              {/* 新歌部分注意：无法渲染 */}
              {/* <div>
                    {
                        this.state.xg.map(item=>(
                                <div key={item.id} style={{display:"flex",
                                                          flexDirection:"column",
                                                          width:"33.3%",
                                                          borderRadius:"30px"}}>
                                    <img src={item.album.blurPicUrl}
                                    style={{width:"100%"}}
                                    />
                                    <p>{item.name}</p>
                                </div>
                            
                        ))
                    }
              </div> */}
              </Tabs>
            <WhiteSpace />
            <Public_TAB pops={this.props}/>
        </div>
)}}
export default Discover